<template>
  <div>
    <el-form ref="dataList" :model="forms" label-width="120px" label-position="top">
      <el-row>
        <el-col>
          <el-table :data="forms.areaList" border class="borderTable">
            <el-table-column label="序号" align="center" type="index" width="55" />
            <el-table-column label="省" align="center" prop="taskName">
              <template #default="scope">
                <span>{{ scope.row.province }}</span>
              </template>
            </el-table-column>
            <el-table-column label="预评估任务名称" align="center" prop="taskName">
              <template #default="scope">
                <span>{{ scope.row.ypgTaskNames }}</span>
              </template>
            </el-table-column>
            <el-table-column label="系统得分" align="center" prop="systemScore">
              <template #default="scope">
                {{ scope.row.systemScore }}
              </template>
            </el-table-column>
            <el-table-column label="专家得分" align="center" prop="exportScore">
              <template #default="scope">
                {{ scope.row.exportScore }}
              </template>
            </el-table-column>
            <el-table-column label="专家评分进度" align="center" prop="exportScoreProgress">
              <template #default="scope">
                <span @click="scoreProgress(scope.row)" style="color: var(--el-color-primary); cursor: pointer">
                  {{ scope.row.exportScoreProgress }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="得分详情" align="center" prop="">
              <template #default="scope">
                <el-button plain @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" prop="">
              <template #default="scope">
                <el-button plain @click="handleRecalculate(scope.row)">重新计算</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="系统评分" v-model="SystemOpen" width="800px" append-to-body>
      <div class="systemBox"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="SystemOpen = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="专家评分进度" v-model="scoringProgress" width="800px" append-to-body>
      <el-table :data="expertTable" class="tableExpert">
        <el-table-column label="序号" align="center" type="index" width="155" />
        <el-table-column label="专家" prop="name" align="center"></el-table-column>
        <el-table-column label="打分情况" prop="score" align="center">
          <template #default="scope">
            <span v-if="scope.row.status == 0">未打分</span>
            <span v-if="scope.row.status == 1">已打分</span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="scoringProgress = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import {
  areaSystemScoreOps,
  getGlTaskScoreDetails,
  getAreaSystemScoreOpsing,
  expertScoreProgress
} from "@/api/workEvaluation/appraisalTaskManagement/appraisalTaskManage.js";
const { proxy } = getCurrentInstance();
const expertTable = ref([])
const SystemOpen = ref(false); //系统评分模态框
const scoringProgress = ref(false); //专家评分进度模态框
const router = useRouter();
const props = defineProps({
  forms: {
    default: {},
    type: Object,
  },
  krtId: {
    default: "",
    type: String,
  }
})
const { forms, krtId } = toRefs(props)
// 重新计算
const handleRecalculate = (val) => {
  areaSystemScoreOps({ krtId: krtId.value, provinceId: val.provinceId }).then(
    (res) => {
      if (res.code == 200) {
        startSystemScore(val);
      }
    }
  );
  SystemOpen.value = true;
};
// 系统评分开始计算
const startSystemScore = (val) => {
  let box = document.getElementsByClassName("systemBox")[0];
  let startTime = setInterval(() => {
    let str = "";
    getAreaSystemScoreOpsing({
      krtId: krtId.value,
      provinceId: val.provinceId,
    }).then((res) => {
      nextTick(() => {
        res.data.forEach((v, i) => {
          str += `<p>` + v + `</p>`;
        });
        box.innerHTML = str;
        if (res.data.includes("计算完成")) {
          clearInterval(startTime);
        }
      });
    });
  }, 500);
};
const scoreProgress = (val) => {
  console.log(val.krtytId)
  scoringProgress.value = true
  getExpertProgress(val.krtytId)
}
function getExpertProgress(val) {
  expertScoreProgress({
    krtytId: val
  }).then(res => {
    console.log(res)
    expertTable.value = res.data
  })
}
const handleView = (val) => {
  router.push({
    path: "/workEvaluation/appraisalTaskManagement/detailIndex",
    query: {
      active: 2,
      provinceId: val.provinceId,
      krtId: krtId.value,
    }
  });
}
</script>
<style lang="scss" scoped>
.systemBox {
  width: 100%;
  text-align: center;

  p {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
  }
}

.tableExpert {
  padding: 20px 0;
  box-sizing: border-box;
}
</style>